<script>
import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";

export default {
  name: "ReFilePreview",
  props: {
    id: {
      type: [String, Number],
      default: null
    },
    type: {
      type: String,
      default: ""
    },
    fileType: {
      type: String,
      default: ""
    },
    raw: {
      type: File,
      default: () => new File([], "")
    },
    filePath: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      src: "",
      excelOptions: {},
      filePreviewRef: null,
      isImage: this.isImage,
      isVideo: this.isVideo,
      isText: this.isText,
      isAudio: this.isAudio
    };
  },
  components: {
    VueOfficeDocx: () => import("@vue-office/docx"),
    VueOfficeExcel: () => import("@vue-office/excel"),
    VueOfficePdf: () => import("@vue-office/pdf"),
    RePlayer: () => import("@/components/RePlayer/src/index.vue")
  },
  mounted() {
    this.renderTheFile(); // File rendering logic
  },
  methods: {
    renderTheFile() {
      // Add your file rendering logic here
    },
    renderedHandler() {
      // Handle the rendered event
    },
    errorHandler() {
      // Handle errors during rendering
    },
    isImage(fileType) {
      return ["jpg", "jpeg", "png", "gif", "bmp"].includes(fileType.toLowerCase());
    },
    isVideo(fileType) {
      return ["mp4", "webm", "ogg"].includes(fileType.toLowerCase());
    },
    isText(fileType) {
      return ["txt", "md"].includes(fileType.toLowerCase());
    },
    isAudio(fileType) {
      return ["mp3", "wav", "ogg"].includes(fileType.toLowerCase());
    }
  }
};
</script>

<template>
  <div ref="filePreviewRef" class="file-preview">
    <vue-office-docx
        v-if="fileType === 'docx' || fileType === 'doc'"
        :src="src"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
    <vue-office-excel
        v-if="fileType === 'xlsx' || fileType === 'xls'"
        :src="src"
        width="100%"
        height="100%"
        :auto-resize="true"
        :enable-scrollbars="true"
        :options="excelOptions"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
    <vue-office-pdf
        v-if="fileType === 'pdf'"
        :src="src"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
    <el-image
        v-if="isImage(fileType)"
        :preview-teleported="true"
        fit="cover"
        class="w-[200px] align-left"
        :src="src"
        title="点击查看大图"
        :preview-src-list="[src]"
    />
    <RePlayer v-if="isVideo(fileType)" :url="src" :controls="true" />
    <div v-if="isText(fileType)">
      <pre v-html="src" />
    </div>
    <audio v-if="isAudio(fileType)" :src="src" controls />
  </div>
</template>

<style lang="scss" scoped>
.file-preview {
  width: 100%;
  height: 500px;
  overflow: auto;
  text-align: left;
}
</style>
